<template>
	<el-card shadow="never" style="height: 100%; display: flex; flex-direction: column;">
		<template #header>
			<div class="card-header-title">
				<span>附件详情</span>
			</div>
		</template>

		<div v-if="Object.keys(currentFileInfo).length === 0" class="noneData column" style="flex-grow: 1; display:flex; justify-content:center; align-items:center;">
			<el-empty description="请点击左侧选择" />
		</div>

		<div v-else class="card-body-content" >
			<!-- 内容封面 -->
			<div class="cover">
				<fileTypeCoverTem isPreview :fileType="currentFileInfo.type" :fileCover="currentFileInfo.cover" :fileUrl="currentFileInfo.url"></fileTypeCoverTem>
			</div>
			<!-- 文件信息 -->
			<div style="padding: 0 10px;">
				<p style="font-weight: bold; margin-bottom: 10px;">文件信息</p>

				<table class="info-table">
					<tbody>
						<tr>
							<td>文件名称：</td>
							<td>{{currentFileInfo.name}}</td>
						</tr>
						<tr>
							<td>文件类型：</td>
							<td>{{currentFileInfo.ext}}</td>
						</tr>
						<tr>
							<td>存储位置：</td>
							<td>{{currentFileInfo.disk}}</td>
						</tr>
						<tr>
							<td>文件大小：</td>
							<td>{{bytesToMB(currentFileInfo.size)}}KB</td>
						</tr>
						<tr>
							<td>上传者：</td>
							<td>{{currentFileInfo.uploader_type}}</td>
						</tr>
						<tr>
							<td>上传时间：</td>
							<td>{{currentFileInfo.add_time}}</td>
						</tr>
						<tr>
							<td>文件链接：</td>
							<td>
								<div class="file-url-container">
									<el-tooltip
										effect="light"
										:content="currentFileInfo.url"
										placement="top"
										:open-delay="500"
										popper-class="url-tooltip-popper"
									>
										<span class="file-url-text">{{currentFileInfo.url}}</span>
									</el-tooltip>
									<el-button 
										type="primary" 
										link 
										size="small" 
										@click="copyToClipboard(currentFileInfo.url)" 
										style="margin-left: 8px; flex-shrink: 0;"
									>
										<el-icon style="margin-right: 2px;"><CopyDocument /></el-icon>复制
									</el-button>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</el-card>
</template>

<script>
	import fileTypeCoverTem from './fileTypeCover.vue'
	import { useAttachmentStore } from "../../../../stores/attachment"
    import { ElMessage } from 'element-plus';
    import { CopyDocument } from '@element-plus/icons-vue';

	export default {
		components: { 
            fileTypeCoverTem,
            CopyDocument
        },

		data() {
			return {
				tableData: [
					{ type: 'image', url: "1234234dsfa", name: 'ddddd' }
				]
			}
		},
		computed:{
			attachmentStore() {
				return useAttachmentStore()
			},
			currentFileInfo(){
				return this.attachmentStore.currentFileInfo.info
			},
		},
		methods:{
			bytesToMB(bytes, decimalPlaces = 2) {
			    return (bytes / (1024)).toFixed(decimalPlaces);
			},
            async copyToClipboard(text) {
                try {
                    await navigator.clipboard.writeText(text);
                    ElMessage.success('复制成功！');
                } catch (err) {
                    ElMessage.error('复制失败，请手动复制。');
                    console.error('Failed to copy: ', err);
                }
            }
		}
	}
</script>

<style scoped lang="less">
	:deep(.el-card__header) {
		background-color: #ffffff !important;
	}
	:deep(.el-card__body) {
		padding: 0px !important;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	:deep(.el-card__footer) {
		background-color: #ffffff !important;
		padding: 10px 15px !important;
	}

	.card-body-content {
		overflow-y: auto;
		flex-grow: 1;
		padding: 0;
	}

	.cover {
		height: 280px;
		margin: 4px 0 15px 0;
		overflow: hidden;
		background-color: #f0f0f0;
		flex-shrink: 0;
	}

	.noneData {
		background-color: var(--el-fill-color-blank);
	}

	.info-table {
		border-collapse: collapse;
		width: 100%;
		table-layout: fixed;

		td {
			border: 1px solid var(--el-border-color-lighter);
			padding: 6px 8px;
			text-align: left;
			word-break: break-word;
			font-size: 13px;
		}

		td:first-child {
			text-align: right;
			width: 90px;
			background-color: #fdfdfd;
			font-weight: normal;
			color: #606266;
		}
	}

    .file-url-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .file-url-text {
        flex-grow: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.5;
        margin-right: 8px;
    }
</style>

<style lang="less">
.url-tooltip-popper {
    max-width: 250px !important;
    width: auto !important;
    overflow-wrap: break-word;
    word-break: break-all;
    line-height: 1.4;
}
</style>